<template>
  <div>
    <div class="box">
      <!-- 面包屑 -->
      <bread :bread="$route.meta.bread"></bread>
      <!-- 用户搜索表单区域 -->
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="username" placeholder="请输入用户名">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getUsers"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addUserShow = true"
            >添加用户</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 用户列表数据渲染区域 -->
      <el-table :data="userList" style="width: 100%" border>
        <el-table-column label="#">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column prop="role_name" label="角色"></el-table-column>
        <el-table-column prop="email" label="状态">
          <!-- 把按钮嵌套到页面中去 -->
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              active-color="#13ce66"
              inactive-color="#a0a0a0"
              @change="changeUserState(scope.row.id, scope.row.mg_state)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="userEdit(scope.row)"
            >
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="del(scope.row.id)"
            >
            </el-button>
            <el-button
              type="warning"
              icon="el-icon-setting"
              size="mini"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器区域 -->
      <div class="page">
        <el-pagination
          @size-change="changeSize"
          @current-change="changePage"
          :current-page="pagenum"
          :page-sizes="[3, 6, 9, 12]"
          :page-size="pagesize"
          layout="total,sizes,prev,pager,next,jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 添加用户区域 -->
    <el-dialog title="添加用户" :visible.sync="addUserShow">
      <el-form>
        <el-form-item title="用户名" label-width="80px">
          <el-input
            v-model="users.username"
            placeholder="输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item title="密码" label-width="80px">
          <el-input v-model="users.password" placeholder="输入密码"></el-input>
        </el-form-item>
        <el-form-item title="邮箱" label-width="80px">
          <el-input v-model="users.email" placeholder="输入邮箱"></el-input>
        </el-form-item>
        <el-form-item title="电话" label-width="80px">
          <el-input v-model="users.mobile" placeholder="输入电话"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="addUserShow = false">取消</el-button>
        <el-button type="primary" @click="addUser">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改用户区域方法 -->
    <div>
      <el-dialog title="修改用户" :visible.sync="editUserShow">
        <el-form>
          <el-form-item title="用户名" label-width="80px">
            <el-input
              v-model="editUser.username"
              placeholder="输入用户名"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item title="邮箱" label-width="80px">
            <el-input
              v-model="editUser.email"
              placeholder="输入邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item title="电话" label-width="80px">
            <el-input
              v-model="editUser.mobile"
              placeholder="输入电话"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="editUserShow = false">取消</el-button>
          <el-button type="primary" @click="saveUser">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import bread from "../common/bread.vue";
export default {
  components: { bread },
  name: "",
  data() {
    return {
      //搜索用户名
      username: "",
      // 第几页数据
      pagenum: 1,
      // 每页数据条数
      pagesize: 3,
      //总条数
      total: 0,
      // 定义一个变量
      userList: [],
      // 用户添加的单匡显示
      addUserShow: false,
      // 用户信息
      users: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      // 修改用户的信息
      editUserShow: false,
      // 修改用户区域
      editUser: {
        username: "",
        email: "",
        mobile: "",
      },
    };
  },
  mounted() {
    //调用获取列表的数据
    this.getUsers();
    console.log(this.$route);
  },
  methods: {
    //获取用户的列表数据
    getUsers() {
      //axiosget数据
      this.$axios
        .get(
          `https://www.liulongbin.top:8888/api/private/v1/users?query=${this.username}&pagenum=${this.pagenum}&pagesize=${this.pagesize}`
        )
        .then((res) => {
          if (res.meta.status == 200) {
            this.userList = res.data.users;
            this.total = res.data.total;
          }
        });
    },

    // 执行添加用户的方法
    addUser() {
      // 用户名和密码不能为空
      if (this.users.username == "" || this.users.password == "") {
        this.$message.error("用户名和密码不能为空");
        return false;
      }
      // 请求添加用户的接口
      this.$axios
        .post(
          "https://www.liulongbin.top:8888/api/private/v1/users",
          this.users
        )
        .then((res) => {
          if (res.meta.status == 201) {
            this.$message.success(res.meta.msg);
            this.addUserShow = false;
            // 清空文本框
            this.users = {
              username: "",
              password: "",
              email: "",
              mobile: "",
            };
          } else {
            this.$message.error(res.meta.msg);
          }
        });
    },

    // 修改用户的状态
    changeUserState(userId, state) {
      this.$axios
        .put(
          `https://www.liulongbin.top:8888/api/private/v1/users/${userId}/state/${state}`
        )
        .then((res) => {
          if (res.meta.status == 200) {
            this.$message.success(res.meta.msg);
          } else {
            this.$message.error(res.meta.msg);
          }
        });
    },

    // 用户编辑区域
    userEdit(row) {
      // row 接受编辑按钮传递过来的当前行的数据
      console.log(row);
      // 把获取到的数据，直接个editUser
      this.editUser = row;
      // 控制表单显示
      this.editUserShow = true;
    },

    // 保存用户的信息，请求接口的
    saveUser() {
      //判断邮箱和电话不能为空
      if (this.editUser.email == "" || this.editUser.mobile == "") {
        this.$message.error("邮箱和手机不能为空");
        return false;
      }

      // 执行修改的操作，调用修改用户的接口
      this.$axios
        .put(
          `https://www.liulongbin.top:8888/api/private/v1/users/${this.editUser.id}`,
          {
            email: this.editUser.email,
            mobile: this.editUser.mobile,
          }
        )
        .then((res) => {
          if (res.meta.status == 200) {
            this.$message.success(res.meta.msg);
            this.editUserShow = false;
          } else {
            this.$message.error(res.meta.msg);
          }
        });
    },

    // 改变每页显示的数据个数的时候触发
    changeSize(size) {
      // 改变每页显示的条数
      this.pagesize = size;
      // 获取用户列表的接口
      this.getUsers();
    },

    // 改变当前页使用的方法
    changePage(page) {
      this.pagenum = page;
      // 获取用户列表的接口
      this.getUsers();
    },

    //删除用户信息的操作
    del(id) {
      this.$confirm("您确定要删除此用户吗？删除可就不能恢复了呦", "title", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 执行删除的接口
          this.$axios.delete(`users/${id}`).then((res) => {
            // 删除成功返回状态为200
            if (res.meta.status == 200) {
              this.$message.success(res.meta.msg);
              // 重新获取数据
              this.getUsers();
            } else {
              this.$message.error(res.meta.msg);
            }
          });
        })
        .catch(() => {
          // 取消删除操作
          this.$message("已经取消删除用户");
        });
    },
  },
};
</script>

<style scoped>
.box {
  padding: 10px;
}
.table-bordered {
  width: 100%;
  height: 100%;
  background: #fff;
}

.table-bordered th,
.table-bordered td {
  text-align: center;
}
.table {
  margin-top: 10px;
  border-radius: 10px;
}
.page {
  margin-top: 20px;
}
</style>
